<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>软件工程</title>
    <style>
        /*top制作*/
        .top {
            height: 90px;
            background-color: #f1f1f1;
        }

        .w {
            position: relative;
            width: 1500px;
            margin: 0 auto;
        }

        .logo {
            float: left;
            position: absolute;
            top: 15px;
            width: 60px;
            height: 60px;
            background-color: darkseagreen;
        }

        .logo a {
            display: block;
            width: 60px;
            height: 60px;
            background: url(../static/img/1.jpg) no-repeat;
            background-size: cover;
            font-size: 0; /*隐藏图片后文字*/
        }

        .fl {
            float: left;
            line-height: 90px;
            margin-left: 80px;
        }

        .styleGrey {
            color: #666666;
        }

        .top ul li {
            float: right;
            line-height: 90px;
            list-style-type: none;
        }

        /*搜索制作*/
        .search {
            position: absolute;
            left: 1050px;
            top: 25px;
            width: 300px;
            height: 36px;
            border: 2px solid darkolivegreen;
        }

        .search input {
            width: 220px;
            height: 36px;
            padding-left: 10px;
            border: 0;
            outline: none;
        }

        .search button {
            float: right;
            width: 78px;
            height: 36px;
            border: none;
            outline: none;
            background-color: darkseagreen;
            font-size: 16px;
            color: #fff;
        }

        /*搜索制作*/
        .fr a {
            text-decoration: none;
        }

        .top .fr ul li:nth-child(even) /*小竖线制作*/
        {
            width: 1px;
            height: 16px;
            background-color: #666;
            margin: 38px 20px 0;
        }

        /*导航栏制作*/
        .banner {
            height: 40px;
            background-color: darkgray;
        }

        .navItems {
            margin-left: 150px;
            height: 40px;
            width: 1461px;
            background-color: darkgray;
        }

        .navItems ul li {
            float: left;
            list-style-type: none;
        }

        .navItems ul li a {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            padding: 0 130px;
            text-decoration: none;
            color: darkolivegreen;
        }

        /*主体制作*/
        .bigBox {
            width: 1461px;
            height: 1500px;
            background-color: snow;
            margin: 0 auto;
        }

        .leftBox {
            float: left;
            width: 330px;
            height: 1400px;
            background-color: darkseagreen;
            margin-top: 21px;
        }

        .dt {
            width: 330px;
            height: 40px;
            font-size: 18px;
            color: darkolivegreen;
            background-color: lightgray;
            text-align: center;
            padding-top: 16px;
        }

        .rightBox {
            float: left;
            width: 1100px;
            height: 1400px;
            background-color: ivory;
            margin-top: 21px;
        }

        .dd {
            height: 200px;
            width: 250px;
            float: left;
        }

        .dd ul li a {
            display: block;
            width: 300px;
            height: 40px;
            background-color: darkseagreen;
            font-size: 16px;
            color: antiquewhite;
            text-decoration: none;
            padding-left: 90px;
            line-height: 40px;
        }


        .dd ul li ul li {
            list-style-type: none;
            margin-left: 40px;
            color: antiquewhite;
        }

        .dd ul li a:hover {
            background-color: darkolivegreen;//鼠标经过背景变色
        }

        .dd ul li ul {
            display: none;
        }
        .dd ul li {
            list-style-type: none;
            margin-left: -40px;
        }

        .dd ul li:hover ul {
            display: block;
        }
        .current :hover li {
            display: block;
        }
        .current li{
            height: 50px;
            width: 300px;
            text-align: center;
            line-height: 50px;
        }
        .current li:hover{
            background-color: darkolivegreen;//鼠标经过背景变色
        }
        /*
        .subtitle {
            width: 1100px;
            height: 1500px;
            border: 1px solid #cccccc;
            margin-left:430px ;
            margin-top: 7px;
        }
        */
        .rightBox h1 {
            height: 70px;
            border-bottom: 1px dotted #cccccc;
            font-size: 25px;
            font-weight: 400;
            line-height: 70px;
            padding-left: 40px;
        }

        .rightBox ul li {
            font-size: 20px;
            height: 35px;
            line-height: 35px;
            padding-left: 100px;
        }

        .rightBox ul {
            margin-top: 40px;
        }

        .itemOne {
            display: none;
        }
        .itemOne p{
            line-height: 25px;//行高设置
        text-indent: 2em;//每段（p标签）首行缩进
        }
        .itemOne h4{
            line-height: 25px;//行高设置
        text-indent: 2em;//每段（p标签）首行缩进
        }
        .itemTwo {
            display: none;
        }
        .itemTwo p{
            line-height: 25px;
            text-indent: 2em;
        }
        .itemTwo h4{
            line-height: 25px;//行高设置
        text-indent: 2em;//每段（p标签）首行缩进
        }
        .itemThree {
            display: none;
        }
        .itemThree p{
            line-height: 25px;
            text-indent: 2em;
        }
        .itemThree h4{
            line-height: 25px;//行高设置
        text-indent: 2em;//每段（p标签）首行缩进
        }
    </style>

</head>
<body>
<div class="top">
    <div class="w">
        <div class="logo">
            <h1>
                <a href="index.html" title="软件工程项目">软件工程项目</a>
            </h1>
        </div>
        <div class="fl">Software Engineer</div>
        <div class="search">
            <input type="search" name="" id="" placeholder="软件工程">
            <button>搜索</button>
        </div>
        <div class="fr">
            <ul>
                <li><a href="#" class="styleGrey">登录</a></li>
                <li></li>
                <li><a href="#" class="styleGrey">注册</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="banner">
    <div class="navItems">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">软工概述</a></li>
            <li><a href="/getSubCase">子案例</a></li>
            <li><a href="#">完整案例</a></li>
        </ul>
    </div>
</div>
<div class="bigbox">
    <div class="leftBox">
        <div class="dt">全部案例</div>
        <div class="dd">
            <ul>
                <li><a>完整案例1</a>
                    <ul class="current" id="subOne">
                        <li>案例简介</li>
                        <li>技术准备</li>
                        <li>开发流程</li>
                        <li>界面展示</li>
                    </ul>
                </li>
                <li><a>完整案例2</a>
                    <ul class="current" id="subTwo">
                        <li>案例简介</li>
                        <li>技术准备</li>
                        <li>开发流程</li>
                        <li>界面展示</li>
                    </ul>
                </li>
                <li><a>完整案例3</a>
                    <ul class="current" id="subThree">
                        <li>案例简介</li>
                        <li>技术准备</li>
                        <li>开发流程</li>
                        <li>界面展示</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="rightBox">
        <div class="itemOne">
            <h1>案例简介</h1>
            <p>该学生信息管理系统涉及到学生、教师、系统管理员、班级、学生成绩、课程。设置一个系统管理员对系统进行管理。所有用户需输入账号、密码登录进入系统；管理员进入系统后可对学生、老师、班级、课程进行增删改查操作；学生进入系统，查看成绩、查看和修改自己的信息；老师进入系统后，对自己这门课程的学生设置课程成绩、查看和修改自己的信息，查看学生的信息和成绩、以及统计分析学生的成绩</p>
            <p>管理员为班级设置年级，为年级设置课程，为班级的每门课程设置老师，为学生设置班级。一个年级有多门课程(语文、数学、外语等等)，班级的每门课程只能有一名老师，一个老师可以有多门课程；老师选择自己这门课程为该课程的学生登记成绩。老师可以查看其他老师的信息(可以当成是老师的通讯录)，查看本课程学生的信息和成绩；学生可以查看班级其他同学的信息(可以看成是班级的同学录)。</p>
        </div>
        <div class="itemOne">
            <h1>技术准备</h1>
            <p>系统环境：Windows</p>
            <p>开发工具：Eclipse</p>
            <p>Java版本：JDK 1.7</p>
            <p>服务器：tomcat 7.0</p>
            <p>系统采用技术：Servlet+Jsp+Jdbc+H-ui+EasyUI+jQuery+Ajax+面向接口编程</p>
        </div>
        <div class="itemOne">
            <h1>开发流程</h1>
            <h4>① 需求分析</h4>
            <p>确定要做哪些功能</p>
            <h4>② 表结构设计</h4>
            <p>创建数据库：student</p>
            <img src="../static/img/11.png" style="margin-left: 20px">
            <p>创建学生表：student</p>
            <img src="../static/img/12.png" style="margin-left: 20px">
            <h4>③ 原型设计</h4>
            <p>就是设计界面，在商业项目中，这是很重要的一步，我们可以解除界面原型，低成本、高效率的与客户达成需求的一致性。</p>
        </div>
        <div class="itemOne">
            <h1>界面展示</h1>
            <img src="../static/img/3.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.1登陆界面</p>
            <img src="../static/img/4.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.2主界面</p>
            <img src="../static/img/5.jpg" style="width: 850px;height: 400px;margin-left: 20px">
        </div>
        <div class="itemTwo">
            <h1>案例简介</h1>
            <p>该学生信息管理系统涉及到学生、教师、系统管理员、班级、学生成绩、课程。设置一个系统管理员对系统进行管理。所有用户需输入账号、密码登录进入系统；管理员进入系统后可对学生、老师、班级、课程进行增删改查操作；学生进入系统，查看成绩、查看和修改自己的信息；老师进入系统后，对自己这门课程的学生设置课程成绩、查看和修改自己的信息，查看学生的信息和成绩、以及统计分析学生的成绩</p>
            <p>管理员为班级设置年级，为年级设置课程，为班级的每门课程设置老师，为学生设置班级。一个年级有多门课程(语文、数学、外语等等)，班级的每门课程只能有一名老师，一个老师可以有多门课程；老师选择自己这门课程为该课程的学生登记成绩。老师可以查看其他老师的信息(可以当成是老师的通讯录)，查看本课程学生的信息和成绩；学生可以查看班级其他同学的信息(可以看成是班级的同学录)。</p>
        </div>
        <div class="itemTwo">
            <h1>技术准备</h1>
            <p>系统环境：Windows</p>
            <p>开发工具：Eclipse</p>
            <p>Java版本：JDK 1.7</p>
            <p>服务器：tomcat 7.0</p>
            <p>系统采用技术：Servlet+Jsp+Jdbc+H-ui+EasyUI+jQuery+Ajax+面向接口编程</p>
        </div>
        <div class="itemTwo">
            <h1>开发流程</h1>
            <h4>① 需求分析</h4>
            <p>确定要做哪些功能</p>
            <h4>② 表结构设计</h4>
            <p>创建数据库：student</p>
            <img src="../static/img/11.png" style="margin-left: 20px">
            <p>创建学生表：student</p>
            <img src="../static/img/12.png" style="margin-left: 20px">
            <h4>③ 原型设计</h4>
            <p>就是设计界面，在商业项目中，这是很重要的一步，我们可以解除界面原型，低成本、高效率的与客户达成需求的一致性。</p>
        </div>
        <div class="itemTwo">
            <h1>界面展示</h1>
            <img src="../static/img/3.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.1登陆界面</p>
            <img src="../static/img/4.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.2主界面</p>
            <img src="../static/img/5.jpg" style="width: 850px;height: 400px;margin-left: 20px">
        </div>
        <div class="itemThree">
            <h1>案例简介</h1>
            <p>该学生信息管理系统涉及到学生、教师、系统管理员、班级、学生成绩、课程。设置一个系统管理员对系统进行管理。所有用户需输入账号、密码登录进入系统；管理员进入系统后可对学生、老师、班级、课程进行增删改查操作；学生进入系统，查看成绩、查看和修改自己的信息；老师进入系统后，对自己这门课程的学生设置课程成绩、查看和修改自己的信息，查看学生的信息和成绩、以及统计分析学生的成绩</p>
            <p>管理员为班级设置年级，为年级设置课程，为班级的每门课程设置老师，为学生设置班级。一个年级有多门课程(语文、数学、外语等等)，班级的每门课程只能有一名老师，一个老师可以有多门课程；老师选择自己这门课程为该课程的学生登记成绩。老师可以查看其他老师的信息(可以当成是老师的通讯录)，查看本课程学生的信息和成绩；学生可以查看班级其他同学的信息(可以看成是班级的同学录)。</p>
        </div>
        <div class="itemThree">
            <h1>技术准备</h1>
            <p>系统环境：Windows</p>
            <p>开发工具：Eclipse</p>
            <p>Java版本：JDK 1.7</p>
            <p>服务器：tomcat 7.0</p>
            <p>系统采用技术：Servlet+Jsp+Jdbc+H-ui+EasyUI+jQuery+Ajax+面向接口编程</p>
        </div>
        <div class="itemThree">
            <h1>开发流程</h1>
            <h4>① 需求分析</h4>
            <p>确定要做哪些功能</p>
            <h4>② 表结构设计</h4>
            <p>创建数据库：student</p>
            <img src="/static/img/11.png" style="margin-left: 20px">
            <p>创建学生表：student</p>
            <img src="/static/img/12.png" style="margin-left: 20px">
            <h4>③ 原型设计</h4>
            <p>就是设计界面，在商业项目中，这是很重要的一步，我们可以解除界面原型，低成本、高效率的与客户达成需求的一致性。</p>
        </div>
        <div class="itemThree">
            <h1>界面展示</h1>
            <img src="/static/img/3.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.1登陆界面</p>
            <img src="/static/img/4.jpg" style="width: 850px;height: 400px;margin-left: 20px">
            <p>1.2主界面</p>
            <img src="/static/img/5.jpg" style="width: 850px;height: 400px;margin-left: 20px">
        </div>
    </div>
</div>
<script>
    //点击左侧导航栏 只改变右侧内容
    let sub_ones=document.querySelector('#subOne');
    let lis1=sub_ones.querySelectorAll('li');
    let items1 = document.querySelectorAll('.itemOne');
    for (let i = 0; i < lis1.length; i++){
        lis1[i].setAttribute('index1',i);
        lis1[i].onclick = function(){
            let index1 = this.getAttribute('index1');
            for(let i = 0; i < items1.length; i++){
                items1[i].style.display = 'none';
            }
            for(let i = 0; i < items3.length; i++){
                items3[i].style.display = 'none';
            }
            for(let i = 0; i < items2.length; i++){
                items2[i].style.display = 'none';
            }
            items1[index1].style.display = 'block';
        }
    }
    let sub_twos=document.querySelector('#subTwo');
    let lis2=sub_twos.querySelectorAll('li');
    let items2 = document.querySelectorAll('.itemTwo');
    for (let i = 0; i < lis2.length; i++){
        lis2[i].setAttribute('index2',i);
        lis2[i].onclick = function(){
            let index2 = this.getAttribute('index2');
            for(let i = 0; i < items2.length; i++){
                items2[i].style.display = 'none';
            }
            for(let i = 0; i < items3.length; i++){
                items3[i].style.display = 'none';
            }
            for(let i = 0; i < items1.length; i++){
                items1[i].style.display = 'none';
            }
            items2[index2].style.display = 'block';
        }
    }
    let sub_threes=document.querySelector('#subThree');
    let lis3=sub_threes.querySelectorAll('li');
    let items3 = document.querySelectorAll('.itemThree');
    for (let i = 0; i < lis3.length; i++){
        lis3[i].setAttribute('index3',i);
        lis3[i].onclick = function(){
            let index3 = this.getAttribute('index3');
            for(let i = 0; i < items3.length; i++){
                items3[i].style.display = 'none';
            }
            for(let i = 0; i < items2.length; i++){
                items2[i].style.display = 'none';
            }
            for(let i = 0; i < items1.length; i++){
                items1[i].style.display = 'none';
            }
            items3[index3].style.display = 'block';
        }
    }
</script>
</body>
</html>